<!DOCTYPE html>
<html lang="zh-CN" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Remote Connection</title>
    <link th:href="@{/css/tailwind.min.css}" rel="stylesheet">
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet">
    <script type="text/javascript" th:src="@{/layui/jquery-3.5.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>
    <link rel="icon" th:href="@{/images/favicon.ico}" type="image/x-icon" />
    <link rel="shortcut icon" th:href="@{/images/favicon.ico}" type="image/x-icon" />
    <style>
        #leftContent{
            border-radius: 8px 0 0 8px;
        }
        #rightImg{
            background-image: url("[[@{/}]]images/code1.jpg");
            background-size: 100% 100%;
            border-radius: 0 8px 8px 0;
        }

        input{
            height: 47px;
        }
        body{
            background-size: 100% 100%;
            height: 100vh;
            -webkit-user-select:none;
            -moz-user-select:none;
            -ms-user-select:none;
            user-select:none;
        }

        .boxs{
            background-image: url("[[@{/}]]images/bg.jpg");
            background-repeat: no-repeat;
            width: 100%;
            height: 100%;
            background-position: center center;
            background-size: cover;
            display: flex;
            justify-content: center;
            align-items: center;
        }
    </style>
</head>

<body>
<div class="boxs">
<div class="max-w-screen-xl m-0 sm:m-6 bg-white shadow sm:rounded-lg flex justify-center flex-1">
    <div id="leftContent" class="lg:w-1/2 xl:w-5/12 p-6 sm:p-12">
        <div class="mt-1 flex flex-col items-center">
            <h1 class="text-2xl xl:text-3xl font-extrabold">Please Log In</h1>
            <div class="w-full flex-1 mt-8">
                <form class="layui-form"  method="post">
                <div class="mx-auto max-w-xs">
                    <input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5" title="IP地址" lay-verify="isNull"  name="ftpHost" type="text" placeholder="IP地址">
                    <input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5" title="端口号" lay-verify="num"  name="port" type="text" placeholder="端口号(非必填 默认21)">
                    <input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5" title="账号" lay-verify="isNull"  name="userName" type="text" placeholder="账号">
                    <input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5" title="密码" lay-verify="isNull"  name="pwd" type="password" placeholder="密码">
                    <input class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5" title="超时时间" lay-verify="num"  name="timedOut" type="text" placeholder="超时时间(非必填 默认5000)">
                    <select lay-ignore name="ftpType" class="w-full px-8 py-4 rounded-lg font-medium bg-gray-100 border border-gray-200 placeholder-gray-500 text-sm focus:outline-none focus:border-gray-400 focus:bg-white mt-5">
                        <option th:each="conn:${connectionTypeList}" th:value="${conn}" th:text="${conn}"></option>
                    </select>
                    <button lay-submit lay-filter="sub" class="mt-5 tracking-wide font-semibold bg-indigo-500 text-gray-100 w-full py-4 rounded-lg hover:bg-indigo-700 ease-in-out flex items-center justify-center focus:shadow-outline focus:outline-none">
                        <span class="ml-3">登 录</span>
                    </button>
                </div>
                </form>

            </div>
            <div class="w-full flex-1 mt-8 text-center flex flex-row lg:w-1/3">
                <div>代码已托管&nbsp;</div>
                <div>
                    <a href="#" title="跳转到Gitee">
                        <svg t="1639623495033" class="icon" style="width: 1.5em;height: 1.5em;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1418" width="200" height="200"><path d="M512 1024C229.222 1024 0 794.778 0 512S229.222 0 512 0s512 229.222 512 512-229.222 512-512 512z m259.149-568.883h-290.74a25.293 25.293 0 0 0-25.292 25.293l-0.026 63.206c0 13.952 11.315 25.293 25.267 25.293h177.024c13.978 0 25.293 11.315 25.293 25.267v12.646a75.853 75.853 0 0 1-75.853 75.853h-240.23a25.293 25.293 0 0 1-25.267-25.293V417.203a75.853 75.853 0 0 1 75.827-75.853h353.946a25.293 25.293 0 0 0 25.267-25.292l0.077-63.207a25.293 25.293 0 0 0-25.268-25.293H417.152a189.62 189.62 0 0 0-189.62 189.645V771.15c0 13.977 11.316 25.293 25.294 25.293h372.94a170.65 170.65 0 0 0 170.65-170.65V480.384a25.293 25.293 0 0 0-25.293-25.267z" fill="#C71D23" p-id="1419"></path></svg>
                    </a>
                </div>
                &nbsp;
                <div>
                    <a href="#" title="跳转到GitHub">
                        <svg t="1639624417014" class="icon" style="width: 1.5em;height: 1.5em;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2178" width="200" height="200"><path d="M0 524.992q0 166.016 95.488 298.496t247.488 185.504q6.016 0.992 10.016 0.992t6.496-1.504 4-3.008 2.016-4.992 0.512-4.992v-100.512q-36.992 4-66.016-0.512t-45.504-14.016-28.992-23.488-16.992-25.504-8.992-24-5.504-14.496q-8.992-15.008-27.008-27.488t-27.008-20-2.016-14.496q50.016-26.016 112.992 66.016 34.016 51.008 119.008 30.016 10.016-40.992 40-70.016Q293.984 736 237.984 670.976t-56-158.016q0-87.008 55.008-151.008-22.016-64.992 6.016-136.992 28.992-2.016 64.992 11.488t50.496 23.008 25.504 17.504q56.992-16 128.512-16t129.504 16q12.992-8.992 28.992-19.008t48.992-21.504 60.992-9.504q27.008 71.008 7.008 135.008 56 64 56 151.008 0 92.992-56.992 158.496t-172 85.504q43.008 43.008 43.008 104v128.992q0 0.992 0.992 3.008 0 6.016 0.512 8.992t4.512 6.016 12 3.008q152.992-52 250.496-185.504t97.504-300.512q0-104-40.512-199.008t-108.992-163.488-163.488-108.992T512.032 12.96 313.024 53.472 149.536 162.464t-108.992 163.488-40.512 199.008z" p-id="2179"></path></svg>
                    </a>
                </div>
            </div>
        </div>
    </div>
    <div id="rightImg" class="flex-1 bg-indigo-100 text-center hidden lg:flex">
    </div>
</div>

</div>
<script>

    layui.use(['form','layer'], function(){
        var form = layui.form;
        let $ = layui.jquery;
        var layer = layui.layer;


        var reg = /^\d+$/;
        form.verify({
            num: function(value){
                if(value.length > 0){
                    if(!reg.test(value)){
                        return '输入必须是数字';
                    }
                }
            },
            isNull:function (value){
                if (value.length < 1){
                    return "不能为空";
                }
            }
        });


        form.on('submit(sub)', function(data){

            var state = false;
            let i;
            $.ajax({
                url:'/login',
                method:'post',
                data:JSON.stringify(data.field),
                dataType:'JSON',
                contentType: "application/json; charset=utf-8",
                beforeSend:function () {
                    i = layer.msg('连接中...', { icon: 16, shade: [0.5, '#f5f5f5'], scrollbar: false, offset: '50%', time: 300000 });
                },
                success:function (res){

                    if (res.code == 200){
                        state = true;
                        window.location = requestUrl + "/index";
                    }else{
                        layer.close(i);
                        layer.msg(res.msg, {icon: 5});
                            $('#rightImg').css("background-image","url(\"[[@{/}]]images/code3.jpg\")");
                        setTimeout(function (){
                            $('#rightImg').css("background-image","url(\"[[@{/}]]images/code1.jpg\")");
                        },3000)
                        state = false;
                    }
                }
            });
            return state;
        });

    });
</script>
</body>
</html>